<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/register.css">
    <script src="js/login.js"></script>
    <title>注册登录</title>
</head>

<body>
    <header class="header">
        <!-- <a href="./index.html"><img src="img/logo.png" alt="脑袋停止运转啦"></a> -->
        <img src="img/logo.png" alt="脑袋停止运转啦">
        <span>进入我的四次元大脑</span>
    </header>

    <div class="main">
        <div class="register">
            <h4><a href="./register.html">注册成为新白菜博主</a></h4>
            <h4>已经是个成熟的黄花菜，正在飞入自己的四次元世界</h4>
        </div>
        <div class="regis">
            <form action="./php/login.php" method="post">
                <ul>
                    <li><label for="">昵称：</label><input type="text" class="ipt1" id="name" name="name"></li>
                    <span class="message2">请输入六位数字密码</span>
                    <li><label for="">登录密码：</label><input type="password" class="ipt2" id="password" name="password">
                    </li>
                    <span class="message">异次元入口</span>
                    <li><button>注入灵魂</button></li>
                </ul>
            </form>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="footer">
        <h5 class="final">—————————————登录就到这里吧—————————————</h5>
        <h6 class="final">制作人员：郑雨蓓</h6>
    </footer>

    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('登录成功');
        })
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        // 注册事件，失去焦点
        ipt.onblur = function () {
            // 根据表单长度
            if (this.value.length < 6 || this.value.length > 6) {
                //console.log('wrong');
                message.className = 'message wrong';
                message.innerHTML = '此ID已有黄花菜使用'
            } else {
                message.className = 'message right';
                message.innerHTML = '允许出炉';
            }
        }
    </script>
</body>

</html>